<template>
  <div class="home-container">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 欢迎横幅 -->
      <el-row class="welcome-banner">
        <el-col :span="24">
          <div class="banner-content">
            <h1>欢迎使用联邦学习协作平台</h1>
            <p class="subtitle">安全 · 高效 · 协作式机器学习</p>
            <el-button type="primary" size="large">立即开始</el-button>
          </div>
        </el-col>
      </el-row>

      <!-- 快速操作区 -->
      <el-row :gutter="20" class="quick-actions">
        <el-col :xs="24" :sm="12" :md="6" v-for="(action, index) in quickActions" :key="index" @click="handleAction(action)">
          <el-card shadow="hover" class="action-card">
            <div class="action-icon">
              <component :is="action.icon" style="width: 2em; height: 2em" />
            </div>
            <h3>{{ action.title }}</h3>
            <p class="action-desc">{{ action.desc }}</p>
            <el-button type="primary" plain @click="handleAction(action)">立即操作</el-button>
          </el-card>
        </el-col>
      </el-row>

      <!-- 任务概览 -->
      <el-row class="task-overview">
        <el-col :span="24">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>进行中的任务</span>
                <el-button type="primary" text @click="gotoTaskCenter">查看全部</el-button>
              </div>
            </template>

            <el-table :data="tasks" style="width: 100%">
              <el-table-column prop="name" label="任务名称" />
              <el-table-column label="进度">
                <template #default="{ row }">
                  <el-progress :percentage="row.progress" :status="row.status" />
                </template>
              </el-table-column>
              <el-table-column prop="participants" label="参与节点" />
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button link type="primary" @click="viewTaskDetail(row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <!-- 统计信息 -->
      <el-row :gutter="20" class="stats">
        <el-col :xs="24" :sm="12" :md="6" v-for="stat in stats" :key="stat.title">
          <el-statistic
              :title="stat.title"
              :value="stat.value"
              :precision="stat.precision"
              :suffix="stat.suffix"
              class="stat-item"
          />
        </el-col>
      </el-row>
    </div>
    <DatasetUploadDialog ref="uploadDialog"/>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DatasetUploadDialog from "@/components/DatasetUploadDialog.vue"

const uploadDialog=ref(null)

import {
  User,
  Upload,
  Connection,
  DataAnalysis,
  Setting
} from '@element-plus/icons-vue'
import {createRouter as $router} from "vue-router";
import router from "@/router/index.js";

// 快速操作数据
const quickActions = ref([
  {
    icon: Upload,
    title: '上传数据集',
    desc: '安全加密传输本地训练数据',
    action: 'upload'
  },
  {
    icon: Connection,
    title: '加入联邦',
    desc: '参与协作式模型训练',
    action: 'join'
  },
  {
    icon: DataAnalysis,
    title: '模型监控',
    desc: '实时查看训练指标',
    action: 'monitor'
  },
  {
    icon: Setting,
    title: '参数配置',
    desc: '调整训练超参数',
    action: 'config'
  }
])

// 任务数据
const tasks = ref([
  { id: 1, name: '医疗影像分类', progress: 65, participants: 142, status: 'success' },
  { id: 2, name: '金融风控模型', progress: 32, participants: 89, status: 'warning' },
  { id: 3, name: '智能推荐系统', progress: 88, participants: 256, status: 'success' }
])

// 统计信息
const stats = ref([
  { title: '累计训练任务', value: 1289, suffix: '次' },
  { title: '平均准确率', value: 92.34, suffix: '%', precision: 2 },
  { title: '参与设备数', value: 15678, suffix: '台' },
  { title: '数据总量', value: 345.6, suffix: 'TB', precision: 1 }
])

const handleAction = (action) => {
  if (action.action === 'upload') {
    uploadDialog.value.openDialog()
  } else if (action.action === 'monitor') {
    router.push('/monitor')
  } else if (action.action === 'join') {
    router.push('/join')
  } else if (action.action === 'config') {
    router.push('/config')  // 添加这行
  } else {
    console.log('触发其他操作:', action.action)
  }
}

const viewTaskDetail = (task) => {
  console.log('查看任务详情:', task.id)
}



const gotoTaskCenter = () => {
  console.log('跳转到任务中心')
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.nav-menu {
  padding: 0 20px;
}

.logo-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  height: 40px;
}

.flex-grow {
  flex-grow: 1;
}

.welcome-banner {
  background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
  margin-bottom: 30px;
}

.welcome-banner h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.quick-actions {
  margin-bottom: 30px;
}

.action-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
  text-align: center;
}

.action-card:hover {
  transform: translateY(-5px);
}

.action-icon {
  margin: 20px 0;
  color: #409EFF;
}

.action-desc {
  color: #666;
  margin: 15px 0;
  min-height: 60px;
}

.task-overview {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats {
  margin-top: 30px;
}

.stat-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .welcome-banner h1 {
    font-size: 1.8rem;
  }

  .subtitle {
    font-size: 1rem;
  }
}
</style>